<template>
  <div class="component-custom-card">
    <Card shadow>
      <div slot="title" class="header">
        <div class="left">
          <strong>{{ title }}</strong>
          <description>{{ description }}</description>
        </div>
        <div class="right">
          <slot name="action"></slot>
        </div>
      </div>
      <div class="content">
        <slot></slot>
      </div>
    </Card>
    <div class="loading-layout">
      <custom-loading :show="loading"></custom-loading>
    </div>
  </div>
</template>

<script>
  export default {
    name: "CustomCard",
    props: {
      title: {
        type: String,
        default: ''
      },
      loading:{
        type:Boolean,
        default:false
      },
      description:{
        type:String,
        default: ''
      }
    }
  }
</script>

<style scoped lang="less">
  .component-custom-card{
    position: relative;
    .loading-layout{
      overflow: hidden;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: @borderRadiusSmall;
    }
    .header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left{
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        &>*{
          margin-right: @spaceColMin;
        }
      }
    }
  }
</style>